<template>
	<view class='uni-padding-wrap'>
		<!-- 跳转搜索 -->
		<view class="head">
			<view class="head-left">
				<image src="../../../static/index/userhead.png" mode="aspectFit"></image>
			</view>
			<view class="search-bar" style="">
				<view class="search-bar-item">
					<image src="../../../static/index/search.png" mode="aspectFit"></image>
				</view>
			</view>
		</view>
		<!-- 轮播 -->
		<view class="uni-padding-wrap">
			<view class="page-section swiper">
				<view class="page-section-spacing">
					<swiper class="swiper" :indicator-dots="indicatorDots" :autoplay="autoplay" indicator-color="#fff"
					 indicator-active-color="rgba(255, 255, 255, .3)" circular="true" :interval="interval" :duration="duration">
						<swiper-item v-for="(item,index) in items" :key='index'>
							<image class="swiper-item-img" :src="item.bgImg" mode="aspectFit"></image>
							<!-- <view class="swiper-item"></view> -->
						</swiper-item>
					</swiper>
				</view>
			</view>
		</view>
		<!-- 育儿百科 -->
		<view class="parentingEncyclopedia">
			<image src="../../../static/index/parentingEncyclopedia.png" mode=""></image>
		</view>
		<!-- 今日宝宝 -->
		<view class="todayBaby">
			<image @click="babyTap" src="../../../static/index/todayBaby.png" mode=""></image>
			<image @click="weekPlan" src="../../../static/index/dailyPlan.png" mode=""></image>
		</view>
		<!-- 推荐 -->
		<uni-list>
			<uni-list-item title="好物推荐" :showArrow="false">
				<template v-slot:right="">
					<image @click="shoppingMall" style="width: 40px;height: 40px;" src="../../../static/index/more.png" mode="widthFix"></image>
				</template>
			</uni-list-item>
		</uni-list>
		<listCommodities :lists='lists'></listCommodities>
	</view>
</template>

<script>
	import uniList from '@/components/uni-list/uni-list.vue'
	import uniListItem from '@/components/uni-list-item/uni-list-item.vue'
	import listCommodities from '@/components/list-commodities/list-commodities.vue'
	export default {
		components: {
			uniList,
			uniListItem,
			listCommodities
		},
		data() {
			return {
				items: [{
						'bgImg': '../../../static/index/banner.png'
					},
					{
						'bgImg': '../../../static/index/bg.png'
					}
				],
				lists: [{
						'id': '1',
						'src': require('../../../static/1.png'),
						'name': '进口奶瓶进口奶瓶进口奶瓶进口奶瓶',
						'price': '88'
					},
					{
						'id': '2',
						'src': require('../../../static/2.png'),
						'name': '进口奶瓶',
						'price': '88'
					},
					{
						'id': '3',
						'src': require('../../../static/3.png'),
						'name': '进口奶瓶',
						'price': '88'
					}
				],
				indicatorDots: true,
				autoplay: true,
				interval: 2000,
				duration: 500
			};
		},
		methods: {
			shoppingMall() {
				uni.navigateTo({
					url: '../../shoppingMall/shoppingMall'
				})
			},
			weekPlan() {
				uni.navigateTo({
					url: '../../weekPlan/weekPlan'
				})
			},
			babyTap() {
				uni.navigateTo({
					url: '../../babyToday/babyToday'
				})
			},
		}
	}
</script>

<style lang="less" scoped>
	.swiper-item-img {
		width: 100%;
		height: 100%;
	}

	.head {
		display: flex;
		justify-content: space-around;
		padding: 0 30rpx;

		.head-left {
			width: 150rpx;

			image {
				width: 104rpx;
				height: 104rpx;
			}
		}

		.search-bar {
			-webkit-flex: 1;
			flex: 1;

			.search-bar-item {
				background: #F6F6F6;
				height: 52rpx;
				margin-top: 26rpx;
				width: 510rpx;
				border-radius: 26rpx;
			}

			image {
				float: right;
				width: 32rpx;
				height: 32rpx;
				margin-top: 8rpx;
				margin-right: 20rpx;
			}
		}
	}

	.parentingEncyclopedia {
		image {
			display: block;
			margin: 20rpx auto 10rpx;
			width: 691rpx;
			height: 142rpx;
		}
	}

	.todayBaby {
		display: flex;
		justify-content: space-around;

		image {
			width: 375rpx;
			height: 310rpx;
		}
	}
</style>
